<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

	<style>
		.outer{margin:0 auto;width:700px;height:500px;}
		.inner{margin:120px auto;width:600px;height:400px;border:1px solid #ccc;}
		h2 {margin:30px auto;width:100px;color:#3481B0;}
		form {margin:0 auto;margin-top:50px;width:280px;height:300px;}
		table {margin:20px auto;width:260px;height:210px;}
		.td_outer{width: 100%;height: 55px;padding: 0;}
		.log{width:100%;height:40px;border:1px solid #abc;margin:0 auto;display:block;
		font-size: 18px;color:#fff;
		border: none;border-radius: 25px;cursor: pointer;outline: none;clear: both;background:#3194d0;
		}
		button.log:hover{background:#5AACE0;}
		.user{width:240px;height:35px;border:1px solid #abc;margin:0 auto;display:block;background:#fff;font-size: 14px;}
		.psd{width:240px;height:35px;border:1px solid #abc;margin:0 auto;display:block;font-size: 14px;}
		.usernameclass1{
					color: gray;
				}
		.usernameclass2{
			color: black;
		}
		input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
			background-color: rgb(0, 0, 0) !important;
			background-image: none !important;
			color: rgb(0, 0, 0) !important;
			-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
			-webkit-box-shadow: 0 0 0px 1000px white inset !important;
		}
	</style>
</head>
<body>
<div class="outer">
<div class="inner">
	<h2>登录页面</h2>
	<form action="/user/login"  method="post">
		<table>
			<tr>
				<!--<td>用户名：</td>-->
				<td class="td_outer">
					<input type="text" name="username" class="user usernameclass1" onfocus="myfocus()" onblur="myblur()" value="请输入用户名" />
				</td>
			</tr>
			<tr>
				<!--<td>密码：</td>-->
				<td class="td_outer">
					<input type="text" id="member_passwd" name="password"  class="psd usernameclass1"  onfocus="myfocusp()" onblur="myblurp()" value="请输入密码" />
				</td>
			</tr>
			<tr>
				<td colspan="2" ><button type="submit" class="log">登录</button></td>
			</tr>
		</table>
	</form>
</div>
</div>
</body>
</html>
<!--<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
	function myfocus(){
		//聚焦时，如果值是"请输入...",先把值变为空，去掉灰色样式，添加红色样式
		if($(".user").val()=="请输入用户名"){
			$(".user").val("");
			$(".user").removeClass("usernameclass1")
			$(".user").addClass("usernameclass2")
		}
		
	}
	function myblur(){
		//失去焦点时，如果值为空，即没有输入内容，先把值设为"请输入...",
		//去掉样式2，添加样式1
		if($(".user").val()=="")
		{
			$(".user").val("请输入用户名");
			$(".user").removeClass("usernameclass2");
			$(".user").addClass("usernameclass1");
		}
	}

	function myfocusp(){
		//聚焦时，如果值是"请输入...",先把值变为空，去掉灰色样式，添加红色样式
		if($(".psd").val()=="请输入密码"){
			$(".psd").val("");
			document.getElementById("member_passwd").type="password";
			$(".psd").removeClass("usernameclass1")
			$(".psd").addClass("usernameclass2")
		}
		
	}
	function myblurp(){
		//失去焦点时，如果值为空，即没有输入内容，先把值设为"请输入...",
		//去掉样式2，添加样式1
		if($(".psd").val()=="")
		{	
			$(".psd").val("请输入密码");
			document.getElementById("member_passwd").type="text";
			$(".psd").removeClass("usernameclass2");
			$(".psd").addClass("usernameclass1");
		}
	}
</script>
